<style>
progress[value] {
/* Reset the default appearance */
-webkit-appearance: none;
appearance: none;

width: 250px;
height: 20px;
}

progress[value]::-webkit-progress-value {
background-image:
-webkit-linear-gradient(-45deg, 
transparent 33%, rgba(0, 0, 0, .1) 33%, 
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top, 
rgba(255, 255, 255, .25), 
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #09c, #f44);

border-radius: 2px; 
background-size: 35px 20px, 100% 100%, 100% 100%;

@-webkit-keyframes animate-stripes {
100% { background-position: -100px 0px; }
}

@keyframes animate-stripes {
100% { background-position: -100px 0px; }
}

-webkit-animation: animate-stripes 5s linear infinite;
animation: animate-stripes 5s linear infinite;
}

</style>

<script>



function IncValue () {
var ival = $('#progBar').val();
$('#progBar').val(ival + 1);
}

setInterval(IncValue, 50);
</script>

<ons-page>

	<progress id="progBar" style="margin:10px" value="1" max="100" >
</progress>



<ons-button onclick="IncValue()">Default</ons-button>


</ons-page>

